<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <view class="flex-row flex-y-center" style="background-color:#fff;padding:0 24upx;border-bottom:1upx #eee solid;border-top:1upx #eee solid;height:90upx;" v-if="data.goods_info.deliver_type==3">
            <view class="flex-grow-1 flex-x-center" style="height:100%;">
                <view @tap="getOffline" :class="['flex-y-center', data.offline==1?'active':'']" :data-city_id="address.city_id" data-index="1" style="height:100%;">快递配送
                    </view>
            </view>
            <view class="flex-grow-1 flex-x-center" style="height:100%;">
                <view @tap="getOffline" :class="['flex-y-center', data.offline==2?'active':'']" data-index="2" style="height:100%;">到店自提
                    </view>
            </view>
        </view>
        <block v-if="data.offline==1">
            <view style="height:16upx;"></view>
            <navigator class="user-address flex-col" url="/pages/address-picker/address-picker">
                <view class="user-address-top flex-grow-0 flex-row">
                    <image :src="data.__wxapp_img.pt.address_top.url"></image>
                </view>
                <block v-if="data.address">
                    <view class="address-center flex-row flex-y-center">
                        <view class="address-left flex-grow-1 flex-col">
                            <view class="address-userinfo flex-grow-0 flex-row">
                                <view class="address-username flex-grow-1">
                                    收货人：{{data.address.name}}
                                </view>
                                <view class="address-phone flex-grow-1">
                                    {{data.address.mobile}}
                                </view>
                            </view>
                            <view class="address-text flex-grow-1 flex-row">
                                收货地址：{{data.address.province}} {{data.address.city}} {{data.address.district}} {{data.address.detail}}
                            </view>
                        </view>
                        <view class="address-right flex-grow-0">
                            <image :src="data.__wxapp_img.share.right.url"></image>
                        </view>
                    </view>
                    <view class="user-address-bottom flex-grow-0 flex-row">
                        <image :src="data.__wxapp_img.pt.address_bottom.url"></image>
                    </view>
                </block>
                <view class="no-address flex-row" v-else>
                    <view class="flex-grow-0 address-icon">
                        <image :src="data.__wxapp_img.pt.address.url"></image>
                    </view>
                    <view class="flex-grow-1 flex-y-center">
                        <view>请选择收货地址</view>
                    </view>
                    <view class="flex-grow-0 address-to-icon">
                        <image :src="data.__wxapp_img.dapp.jiantou_r.url"></image>
                    </view>
                </view>
            </navigator>
        </block>
        <block v-if="data.offline==2">
            <view class="flex-row address-picker">
                <view class="flex-grow-1">
                    <view class="flex-row" style="margin-bottom: 20upx">
                        <view class="flex-y-center flex-grow-0">联系人：</view>
                        <view class="flex-grow-1">
                            <input @input="KeyName" placeholder="可以手动填写" :value="data.name"></input>
                        </view>
                    </view>
                    <view class="flex-row">
                        <view class="flex-y-center flex-grow-0">联系电话：</view>
                        <view class="flex-grow-1">
                            <input @input="KeyMobile" placeholder="可以手动填写" :value="data.mobile"></input>
                        </view>
                    </view>
                </view>
            </view>
            <view :@tap="data.shop_list.length>=1?'showShop':''" class="flex-row address-picker">
                <view class="flex-grow-1">
                    <view class="flex-row" style="margin-bottom: 20upx">
                        <view class="flex-grow-1">门店名称：{{data.shop.name}}</view>
                    </view>
                    <view class="flex-row" style="margin-bottom: 20upx">
                        <view class="flex-grow-1">门店电话：{{data.shop.mobile}}</view>
                    </view>
                    <view>自提门店：{{data.shop.address}}</view>
                </view>
                <view class="flex-grow-0 flex-y-center" v-if="data.shop_list.length>=1">
                    <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx;margin-left: 12upx"></image>
                </view>
            </view>
        </block>
        <view style="padding-bottom:120upx">
            <view class="flex-col " v-for="(item,index) in data.goods_list" :key="item.id">
                <view class="cart-item flex-row">
                    <view class="flex-grow-0">
                        <image class="goods-pic" mode="aspectFill" :src="item.goods_pic"></image>
                    </view>
                    <view class="flex-grow-1 flex-col">
                        <view class="flex-grow-1">
                            <view class="goods-name">{{item.goods_name}}</view>
                            <view class="attr-list">
                                <view class="attr-item" v-for="(attr,i) in item.attr_list" :key="attr.id">
                                    {{attr.attr_group_name}}:{{attr.attr_name}}
                                </view>
                            </view>
                        </view>
                        <view class="flex-grow-0 flex-row">
                            <view class="flex-grow-1 num">×{{item.num}}</view>
                            <view class="flex-grow-0 price">￥:{{item.price}}</view>
                        </view>
                        <view style="color:#ff4544;text-align:right;margin-bottom:22upx;" v-if="data.type!=='ONLY_BUY'&&item.is_level===true">会员折扣价：￥{{item.level_price}}</view>
                    </view>
                </view>
            </view>
            <view @tap="showPayment" class="colonel flex-row flex-y-center">
                <view class="flex-grow-1">支付方式</view>
                <view class="flex-grow-0" v-if="data.payment==0">线上支付</view>
                <view class="flex-grow-0" v-if="data.payment==2">货到付款</view>
                <view class="flex-grow-0" v-if="data.payment==3">账户余额支付</view>
                <view class="flex-grow-0">
                    <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx;margin-left: 12upx"></image>
                </view>
            </view>
            <view class="colonel flex-row flex-y-center" v-if="data.type=='GROUP_BUY'">
                <view class="colonel-title flex-grow-1">团长优惠</view>
                <view class="colonel-price flex-grow-1">
                    -¥：{{data.colonel}}
                </view>
            </view>
            <view class="colonel flex-row flex-y-center" v-if="data.offline!=2">
                <view class="colonel-title flex-grow-1">运费</view>
                <view class="colonel-price flex-grow-1">
                    ¥：{{data.express_price}}
                </view>
            </view>
            <view class="colonel flex-row flex-y-center">
                <view class="message-title flex-grow-0 flex-y-center">买家留言</view>
                <view class="message flex-grow-1 flex-y-center">
                    <input @input="bindkeyinput" class="flex-y-center" placeholder="你有什么想对商家说的都可以填写在这哦~" placeholderClass="message-plaseholder" style="width:100%;" type="text"></input>
                </view>
            </view>
        </view>
        <view class="submit-footer" style="background:#FEBD14;color:#ffffff;display: flex;align-items: center;justify-content: center;" v-if="data.is_area==1&&data.offline==1">
                所选地区暂时无货
            </view>
        <form @submit="orderSubmit" reportSubmit="true" v-else>
            <view class="submit-footer flex-row flex-y-center">
                <view class="total-title flex-y-center flex-grow-0 ">
                        总计：
                    </view>
                <view class="total-price flex-y-center flex-grow-1">
                    <view>¥ {{data.total_price_1}}</view>
                </view>
                <button class="flex-y-center flex-grow-0 flex-x-center submit-btn" formType="submit">提交</button>
            </view>
        </form>
        <view class="coupon-picker" style="background-color:#f7f7f7;" v-if="data.show_shop">
            <scroll-view class="coupon-list" scrollY="true" style="height: 100%;padding:0;">
                <view class="shop-block flex-y-center">当前地址</view>
                <view class="shop-address flex-row flex-y-center">
                    <view class="flex-grow-1">{{data.location}}</view>
                    <view @tap="dingwei" class="flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.shop.dingwei.url" style="width:32upx;height:32upx;margin-right:2upx;"></image>
                        <text style="color:#2495ff">手动定位</text>
                    </view>
                </view>
                <view class="shop-block flex-y-center">门店列表（仅展示离您最近的30家门店）</view>
                <view @tap="pickShop" class="flex-row address-picker" :data-index="index" style="margin:0;" v-for="(item,index) in data.shop_list" :key="item.id">
                    <view class="flex-grow-0 flex-y-center">
                        <image :src="item.id==data.shop.id?'/static/images/icon-shop-checked.png':'/static/images/icon-shop-un.png'" style="width: 40upx;height: 40upx;margin-right: 20upx"></image>
                    </view>
                    <view class="flex-grow-1">
                        <view class="flex-row" style="margin-bottom: 20upx">
                            <view class="flex-grow-1" style="font-weight:bold;" :style="item.id==data.shop.id?'color:#ff4544':''">
                                {{item.name}}
                            </view>
                            <view class="flex-grow-0" v-if="item.distance!=-1">{{item.distance}}</view>
                        </view>
                        <view class="flex-row" style="margin-bottom: 20upx">
                            <view class="flex-grow-1">电话：{{item.mobile}}</view>
                        </view>
                        <view>地址：{{item.address}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="payment" v-if="data.show_payment">
            <view class="pay-modal">
                <view class="pay-head flex-x-center flex-y-center">支付方式</view>
                <view @tap="payPicker" class="pay-block flex-row flex-y-center" :data-index="item.payment" v-for="(item,index) in data.res.pay_type_list" :key="item.id">
                    <view class="flex-grow-0">
                        <image :src="item.icon" style="width:72upx;height:72upx;margin-right:30upx;"></image>
                    </view>
                    <view :class="['flex-grow-1', data.payment==item.payment?'red':'']">{{item.name}}</view>
                    <view class="flex-grow-0" v-if="data.payment==item.payment">
                        <image :src="data.__wxapp_img.dapp.pay_right.url" style="width:34upx;height:34upx;"></image>
                    </view>
                </view>
                <view @tap="payClose" class="pay-footer flex-x-center flex-y-center hidden">关闭</view>
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = "", a = "";
	export default {
		data() {
			return {
				data: {
        address: null,
        offline: 1,
        payment: -1,
        show_payment: !1,
				goods_info: {}
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), myVue.getApp.core.removeStorageSync(myVue.getApp.const.INPUT_DATA);
        var a, e = this, o = t.goods_info, s = JSON.parse(o);
        a = 3 == s.deliver_type || 1 == s.deliver_type ? 1 : 2, e.setData({
            options: t,
            type: s.type,
            offline: a,
            parent_id: s.parent_id ? s.parent_id : 0
        });
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
        var a = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.PICKER_ADDRESS);
        e && (a.setData({
            address: e,
            name: e.name,
            mobile: e.mobile
        }), myVue.getApp.core.removeStorageSync(myVue.getApp.const.PICKER_ADDRESS), a.getInputData()), 
        a.getOrderData(a.data.options);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this), this.getInputData();
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this), myVue.getApp.core.removeStorageSync(myVue.getApp.const.INPUT_DATA);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			getOrderData: function(e) {
        var o = this, s = "";
        o.data.address && o.data.address.id && (s = o.data.address.id), e.goods_info && (myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.submit_preview,
            data: {
                goods_info: e.goods_info,
                group_id: e.group_id,
                address_id: s,
                type: o.data.type,
                longitude: t,
                latitude: a
            },
            success: function(t) {
                if (o.getApp.core.hideLoading(), 0 == t.code) {
                    var a = 0;
                    for (var e in t.data.list) a = t.data.list[e].level_price;
                    if (2 == o.data.offline) var s = parseFloat(a - t.data.colonel > 0 ? a - t.data.colonel : .01), i = 0; else var s = parseFloat(a - t.data.colonel > 0 ? a - t.data.colonel : .01) + t.data.express_price, i = parseFloat(t.data.express_price);
                    var n = o.getApp.core.getStorageSync(o.getApp.const.INPUT_DATA);
                    o.getApp.core.removeStorageSync(o.getApp.const.INPUT_DATA), n || (n = {
                        address: t.data.address,
                        name: t.data.address ? t.data.address.name : "",
                        mobile: t.data.address ? t.data.address.mobile : ""
                    }, t.data.pay_type_list.length > 0 && (n.payment = t.data.pay_type_list[0].payment, 
                    t.data.pay_type_list.length > 1 && (n.payment = -1)), t.data.shop && (n.shop = t.data.shop), 
                    t.data.shop_list && 1 == t.data.shop_list.length && (n.shop = t.data.shop_list[0])), 
                    n.total_price = t.data.total_price, n.total_price_1 = s.toFixed(2), n.goods_list = t.data.list, 
                    n.goods_info = t.data.goods_info, n.express_price = i, n.send_type = t.data.send_type, 
                    n.colonel = t.data.colonel, n.pay_type_list = t.data.pay_type_list, n.shop_list = t.data.shop_list, 
                    n.res = t.data, n.is_area = t.data.is_area, o.setData(n), o.getInputData();
                }
                1 == t.code && o.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    confirmText: "返回",
                    success: function(t) {
                        t.confirm && o.getApp.core.navigateBack({
                            delta: 1
                        });
                    }
                });
            }
        }));
    },
    bindkeyinput: function(t) {
        this.setData({
            content: t.detail.value
        });
    },
    orderSubmit: function(t) {
        var a = this, e = {}, o = a.data.offline;
        if (e.offline = o, 1 == o) {
            if (!a.data.address || !a.data.address.id) return void myVue.getApp.core.showToast({
                title: "请选择收货地址",
                image: "/static/images/icon-warning.png"
            });
            e.address_id = a.data.address.id;
        } else {
            if (e.address_name = a.data.name, e.address_mobile = a.data.mobile, !a.data.shop.id) return void myVue.getApp.core.showToast({
                title: "请选择核销门店",
                image: "/static/images/icon-warning.png"
            });
            if (e.shop_id = a.data.shop.id, !e.address_name || void 0 == e.address_name) return void myVue.getApp.core.showToast({
                title: "请填写收货人",
                image: "/static/images/icon-warning.png"
            });
            if (!e.address_mobile || void 0 == e.address_mobile) return void myVue.getApp.core.showToast({
                title: "请填写联系方式",
                image: "/static/images/icon-warning.png"
            });
        }
        if (-1 == a.data.payment) return a.setData({
            show_payment: !0
        }), !1;
        a.data.goods_info && (e.goods_info = JSON.stringify(a.data.goods_info)), a.data.picker_coupon && (e.user_coupon_id = a.data.picker_coupon.user_coupon_id), 
        a.data.content && (e.content = a.data.content), a.data.type && (e.type = a.data.type), 
        a.data.parent_id && (e.parent_id = a.data.parent_id), e.payment = a.data.payment, 
        e.formId = t.detail.formId, a.order_submit(e, "pt");
    },
    KeyName: function(t) {
        this.setData({
            name: t.detail.value
        });
    },
    KeyMobile: function(t) {
        this.setData({
            mobile: t.detail.value
        });
    },
    getOffline: function(t) {
        var a = this, e = t.target.dataset.index, o = parseFloat(a.data.res.total_price - a.data.res.colonel > 0 ? a.data.res.total_price - a.data.res.colonel : .01) + a.data.res.express_price;
        if (1 == e) this.setData({
            offline: 1,
            express_price: a.data.res.express_price,
            total_price_1: o.toFixed(2)
        }); else {
            var s = (a.data.total_price_1 - a.data.express_price).toFixed(2);
            this.setData({
                offline: 2,
                express_price: 0,
                total_price_1: s
            });
        }
    },
    showShop: function(t) {
        var a = this;
        a.getInputData(), a.dingwei(), a.data.shop_list && a.data.shop_list.length >= 1 && a.setData({
            show_shop: !0
        });
    },
    dingwei: function() {
        var e = this;
        myVue.getApp.getauth({
            content: "需要获取您的地理位置授权，请到小程序设置中打开授权",
            author: "scope.userLocation",
            success: function(o) {
                o && (o.authSetting["scope.userLocation"] ? myVue.getApp.core.chooseLocation({
                    success: function(o) {
                        t = o.longitude, a = o.latitude, e.setData({
                            location: o.address
                        });
                    }
                }) : myVue.getApp.core.showToast({
                    title: "您取消了授权",
                    image: "/static/images/icon-warning.png"
                }));
            }
        });
    },
    pickShop: function(t) {
        var a = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.INPUT_DATA), o = t.currentTarget.dataset.index;
        e.show_shop = !1, e.shop = "-1" != o && -1 != o && a.data.shop_list[o], a.setData(e);
    },
    showPayment: function() {
        this.setData({
            show_payment: !0
        });
    },
    payPicker: function(t) {
        var a = t.currentTarget.dataset.index;
        this.setData({
            payment: a,
            show_payment: !1
        });
    },
    payClose: function() {
        this.setData({
            show_payment: !1
        });
    },
    getInputData: function() {
        var t = this, a = {
            address: t.data.address,
            name: t.data.name,
            mobile: t.data.mobile,
            payment: t.data.payment,
            content: t.data.content,
            shop: t.data.shop
        };
        myVue.getApp.core.setStorageSync(myVue.getApp.const.INPUT_DATA, a);
    }
		},
	}
</script>

<style scoped>
.user-address {
    background-color: #ffffff;
    margin-bottom: 20upx;
}

.user-address-top image {
    height: 8upx;
    width: 100%;
}

.user-address-bottom image {
    height: 8upx;
    width: 100%;
}

.address-center {
    padding: 32upx 24upx;
    font-size: 11pt;
    color: #353535;
}

.address-right image {
    width: 16upx;
    height: 26upx;
    margin-left: 46upx;
}

.address-phone {
    text-align: right;
}

.address-text {
    margin-top: 28upx;
}

.no-address {
    color: #353535;
    font-size: 11pt;
    padding: 16upx 24upx;
}

.address-icon image {
    width: 34upx;
    height: 42upx;
    margin-right: 14upx;
}

.address-to-icon image {
    width: 12upx;
    height: 22upx;
}

.cart-item {
    background: #fff;
    padding: 32upx 24upx 10upx 24upx;
}

.cart-item .goods-pic {
    width: 156upx;
    height: 156upx;
    margin-right: 20upx;
}

.cart-item .goods-name {
    margin-bottom: 10upx;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item .attr-list,.cart-item .num {
    font-size: 9pt;
}

.cart-item .attr-list .attr-item {
    display: inline-block;
    margin-right: 36upx;
}

.cart-item .attr-list .attr-item:last-child {
    margin-right: 0;
}

.colonel {
    height: 88upx;
    background-color: #ffffff;
    border-top: 1upx solid #e2e2e2;
    padding: 0 24upx;
    font-size: 11pt;
    color: #353535;
}

.colonel-price {
    text-align: right;
}

.message-title {
    width: 168upx;
}

.message-plaseholder {
    font-size: 9pt;
}

.message input {
    font-size: 11pt;
    line-height: 1;
}

.submit-footer {
    height: 98upx;
    background-color: #ffffff;
    position: fixed;
    bottom: var(--window-bottom);
    width: 100%;
    padding-left: 24upx;
    font-size: 12pt;
    z-index: 10;
}

.total-title {
    color: #353535;
}

.total-price {
    color: #ff5c5c;
    line-height: 1;
}

.submit-btn {
    background-color: #ff4544;
    color: #fff;
    width: 250upx;
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    height: 100%;
}

.active {
    border-bottom: 4upx #ff4544 solid;
    color: #ff4544;
}

.address-picker {
    background: #fff;
    padding: 32upx 24upx;
    margin-bottom: 20upx;
    border-bottom: 1upx solid #e3e3e3;
}

.coupon-picker {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background: #fff;
    border-top: 1upx solid #e3e3e3;
}

.coupon-list {
    padding: 34upx;
}

.coupon-list .coupon-item {
    height: 152upx;
    width: 682upx;
    position: relative;
    margin-bottom: 24upx;
}

.coupon-list .coupon-item.coupon-status-1 .coupon-right,.coupon-list .coupon-item.coupon-status-2 .coupon-right {
    color: rgba(0,0,0,0.35)!important;
}

.coupon-list .coupon-item .coupon-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.coupon-list .coupon-item .coupon-status-icon {
    width: 140upx;
    height: 98upx;
    position: absolute;
    top: 0;
    right: 8upx;
    z-index: 1;
}

.coupon-list .coupon-item .coupon-left {
    color: #fff;
    width: 202upx;
}

.coupon-list .coupon-item .coupon-right {
    padding: 20upx 10upx;
}

.shop-block {
    width: 100%;
    height: 70upx;
    padding-left: 24upx;
}

.shop-address {
    width: 100%;
    background-color: #fff;
    padding: 30upx 24upx;
}

.payment {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    bottom: var(--window-bottom);
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
}

.pay-modal {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
}

.pay-head {
    height: 80upx;
    width: 100%;
    color: #353535;
    border-bottom: 1upx #e2e2e2 solid;
}

.pay-block {
    width: 100%;
    height: 120upx;
    color: #999;
    padding: 0 30upx;
    border-bottom: 1upx #e2e2e2 solid;
}

.red {
    color: #ff4544;
}

.pay-footer {
    width: 100%;
    height: 88upx;
    background-color: #ff4544;
    color: #fff;
}
</style>
